<template>
  <div>
    <h3>课程管理</h3>
    <!--搜索和添加-->
    <div>
      <el-col :span="6" style="margin-right: 10px">
        <el-input v-model="search_input" placeholder="搜索"></el-input>
      </el-col>
      <el-button type="success" icon="el-icon-search" @click="search" plain>搜索</el-button>
      <el-button type="warning" icon="el-icon-plus" @click="add_student" plain>添加</el-button>
    </div>
    <!--显示正在搜索的关键字-->
    <el-tag closable @close="handleTagClose()"
            v-show="this.table_info.keywords!==undefined&&this.table_info.keywords.length>0">
      正在搜索：{{ table_info.keywords }}
    </el-tag>

    <!--表格组件-->
    <Table :queryResult="table_info.student_info" :isLoading="table_info.tableIsLoading" @reload_data="loadStuInfo" ref="table_component"/>

    <!--翻页条-->
    <div class="block">
      <el-pagination layout="total, sizes, prev, pager, next, jumper"
                     :total="table_info.student_info_total"
                     :page-sizes="[10, 20, 30, 40]"
                     :page-size="table_info.page_size"
                     :current-page="table_info.page_num"
                     @current-change='handlePageNumChange'
                     @size-change="handlePageSizeChange"
                     background></el-pagination>
    </div>
  </div>
</template>

<script>
import Table from "@/components/course/Table";//引入Table.vue

export default {
  name: 'Home',
  data() {
    return {
      search_input: '',//搜索框输入的内容
      //表格相关信息
      table_info: {
        tableIsLoading: true,//表格加载动画
        student_info: [],//课程详细信息
        student_info_total: 0,//总条目数
        page_size: 10,//每页显示条数，默认为10
        page_num: 1,//当前页，默认为1
        keywords: '',//当用户输入了搜索词时此处被赋值
      },
      msg: ''
    }
  },
  methods: {
    //加载课程信息
    loadStuInfo(){
      this.table_info.tableIsLoading = true;//开启加载动画
      this.getStuInfoCount()
      this.getStuInfoByPageNum()
    },
    //记录
    getStuInfoCount() {
      let params = new URLSearchParams();
      params.append('keywords', this.table_info.keywords)
      //向后台发送post请求查询课程信息总条数
      this.$ajax.post(this.$server + "/course/getCount", params)
          .then(res => {
            this.table_info.student_info_total = res.data;
          })
          .catch(error => {
            console.log("发生错误：" + error)
            this.msg = error
          });
    },
    search() {
      this.table_info.tableIsLoading = true;//开启加载
      this.table_info.page_num = 1;//从第1页开始
      this.table_info.keywords = this.search_input;//把用户输入的内容写入到关键字
      this.getStuInfoCount();//获取该关键字有多少条记录
      this.getStuInfoByPageNum();//查询
    },
    getStuInfoByPageNum() {
      //定义查询参数
      let params = new URLSearchParams();
      params.append('keywords', this.table_info.keywords);
      params.append('page_num', this.table_info.page_num);
      params.append('page_size', this.table_info.page_size);
      //向后台发送post请求查询课程信息
      this.$ajax.post(this.$server + "/course/getByPageNum", params)
          .then(res => {
            this.table_info.student_info = res.data;
            this.table_info.tableIsLoading = false;
          })
          .catch(error => {
            console.log("发生错误：" + error)
            this.msg = error
          });
    },
    //处理页码切换
    handlePageNumChange(val) {
      this.table_info.tableIsLoading = true;
      this.table_info.page_num = val;
      this.getStuInfoByPageNum();
    },
    //处理页面条数变更
    handlePageSizeChange(val){
      this.table_info.tableIsLoading = true;
      this.table_info.page_size = val;
      this.getStuInfoByPageNum();
    },
    //关闭搜索
    handleTagClose() {
      this.table_info.keywords = undefined;//清除关键词
      this.table_info.page_num = 1;//回到第1页
      this.loadStuInfo();
    },
    //添加课程信息
    add_student(){
      //调用子组件的添加课程信息方法
      this.$refs.table_component.add_stu_info();
    }
  },
  //在父组件注册子组件
  components: {
    Table
  },
  created() {
    this.loadStuInfo()
  }
}
</script>
